<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Ejercicio 4</title>
	<style type="text/css">	

	table {
		border: 2px solid black;
		margin: 0 auto;
	}

	tr {
		border: 1px solid black;
	}

	td, th {
		padding: 5px;
	}

	.thead:nth-child(1n) {
		background-color: green;
		color: white;
	}

	table tr:nth-child(2n) {
		background-color: orange;
	}

	table tr:nth-child(2n+1) {
		background-color: #2DA9D2;
	}

	input {
		display: block;
		margin: 0 auto;
		margin-top: 10px;
	}

	#ajax {
		text-align: center;
		margin-top: 5%;
		margin-bottom: 4%;
	}

	</style>
	<script type="text/javascript">
	getTabla();
	function volver() {
		location.replace("index.php");
	}
	function getTabla() {
		var xmlhttp = new XMLHttpRequest();

		xmlhttp.open("POST", "control.php", true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send("js=r");

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				var respuesta = xmlhttp.responseText;
				document.getElementById('ajax').innerHTML = respuesta;
			}
		}
	}
	</script>
</head>
<body>
	<div id="ajax" name="ajax">
		Espere mientras se carga la página.
	</div>
	<input type="button" value="Cancelar y volver" onclick="volver()">
</body>
</html>